<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="./jquery-3.4.1.js"></script> -->
    <script src="./tool.js"></script>
</head>

<body>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <script>
        // console.log($.browser);
        /* 遍历总结： */
        /* 对象的遍历：  for..in循环 */
        /* 数组的遍历：  for循环  for..in循环  forEach方法  for...of */
        /* 伪数组的遍历：for..in循环 for循环 */

        /* 其它的遍历：  Set Map FormData ... 使用forEach方法 | for...of */

        /* jQuery框架中的each方法：基本使用(遍历 数组 && 对象 && 伪数组[jQuery]) */
        /* 补充:[1] jQuery框架中的each方法支持退出循环 ，在回调函数中返回false*/
        /* 补充:[2] jQuery框架中的each方法的回调函数中的this指向是当前的value值 ？*/
        /* 思考:[1] 为啥回调函数中的this要指向当前的value? 因为我们在遍历数据的时候更多的关心的值，不怎么关心索引[key] 好处是可以省略形参*/
        /* 思考:[2] 思考each方法是如何实现的？如果让我们自己实现，能否实现？ */
        /* 001-遍历对象 */
        let o = {
            name: "zs",
            age: 19
        };

        /* 遍历o这个对象，每循环一次就执行一个回调函数，并且把当前的key和value传递给回调函数 */
        $.each(o, function(key, val) {
            console.log(key, val, this);
            if (key == "name") return false;
        })

        /* 002-遍历数组 */
        let arr = ["佩奇", "乔治", "多乐比"];
        $.each(arr, function(index, ele) {
            console.log(index, ele, this);
            // if (ele == "乔治") return false;
        })

        /* 003-遍历伪数组 - jQuery对象*/
        let likeArr = {
            0: "name",
            1: "zge",
            2: "address",
            length: 3
        };
        $.each(likeArr, function(index, ele) {
            console.log(index, ele);
        })

        // console.log($("li"));
        // $.each($("li"), function(index, ele) {
        //     console.log(index, ele, this);
        // });

        // $.each($("li"), function() {
        //     console.log(this);
        // });

        /* 快捷方法：如果要遍历jQuery对象那么可以直接通过jQuery对象来调用each方法 */
        console.log("___");
        // $("li").each(function(index, ele) {
        //     console.log(index, ele);
        // })
    </script>
</body>

</html>